<template>
  <div class="top">
    <var-icon name="chevron-left" :size="30" class="ret" @click="fanHui()" />
    <div class="title1">论文提交</div>
  </div>
  <div class="bg">
    <div class="title2">课题</div>
    <a href="#"
      ><div class="jingxuan">
        <div class="title3">{{ $route.query.title }}</div>
        <div class="time">导师 : {{ $route.query.name }}</div>
        <var-icon name="chevron-right" class="tubiao" color="black" /></div
    ></a>
  </div>
  <form>
  <div class="shade">
    <div class="blue"></div>
    <div class="title4">任务书</div>
  </div>
  <div class="upload-wrap anticon" nv-file-drop="" uploader="uploader">
    <input
      class="file-ele"
      type="file"
      required
      @change="handleFiles"
      ref="file"
    />
    <div class="file-open">
      <em class="icon icon-upload"></em>&nbsp;请在此上传任务书
    </div>
  </div>

  <div class="shade2">
    <div class="blue"></div>
    <div class="title4">中期自查书</div>
  </div>
  <div class="upload-wrap anticon" nv-file-drop="" uploader="uploader">
    <input
      class="file-ele"
      type="file"
      required
      @change="handleFiles"
      ref="file"
    />
    <div class="file-open">
      <em class="icon icon-upload"></em>&nbsp;请在此上传中期自查书
    </div>
  </div>

  <div class="shade2">
    <div class="blue"></div>
    <div class="title4">论文资料</div>
  </div>
  <div class="upload-wrap anticon" nv-file-drop="" uploader="uploader">
    <input
      class="file-ele"
      type="file"
      required
      @change="handleFiles"
      ref="file"
    />
    <div class="file-open">
      <em class="icon icon-upload"></em>&nbsp;请在此上传论文资料(zip格式)
    </div>
  </div>

  <var-button block type="primary" class="bt" size="large"
    >提交论文审查</var-button
  >
  </form>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Snackbar } from "@varlet/ui";
import { useSubStore } from "../../stores/submit";
import axios from "@/utils/axios";
const submit = useSubStore();
const router = useRouter();


// const sub = () => {
//   // let files = event.target.files[0];
//   // if (formData.docu1 === "") {
//   //   setTimeout(() => {
//   //     Snackbar.warning("任务书不能为空");
//   //   });
//   // } else if (formData.docu2 === "") {
//   //   setTimeout(() => {
//   //     Snackbar.warning("中期自查书不能为空");
//   //   });
//   // } else if (formData.docu3 === "") {
//   //   setTimeout(() => {
//   //     Snackbar.warning("论文资料不能为空");
//   //   });
//   // } else {
//   let data = formData.docu1 + formData.docu2 + formData.docu3;
//   submit
//     .sub(data)
//     .then((res) => {
//       if ((res.data.code = 20000)) {
//         setTimeout(() => {
//           Snackbar.success("提交成功");
//         }, 1000);
//       } else {
//         setTimeout(() => {
//           Snackbar.error(res.data.message);
//         });
//       }
//     })
//     .catch((err) => {
//       setTimeout(() => {
//         Snackbar.error(err.data.message);
//       });
//     });
//   // }
// };

function fanHui() {
  router.go(-1);
}
function handleFiles(event) {
  let data = event.target.files[0].name;
  console.log(event.target.files[0])
  // return files;
  // console.log(files);

  // data.append("data", files);
  // data.append('message',files);
  // console.log(data.get('data'))
  // let config = {
  //         headers:{'Content-Type':'application/x-www-form-urlencoded'} 
  //       }; 
  //       axios.post('http://8.142.107.97:8909/digital/college/common/upload',data,config)
  //         .then(response=>{
  //           console.log(response.data);
  //         })
  submit
    .sub(data)
    .then((res) => {
      if ((res.data.code = 20000)) {
        setTimeout(() => {
          Snackbar.success("上传成功");
        }, 1000);
      } else {
        setTimeout(() => {
          Snackbar.error(res.data.message);
        });
      }
    }).catch((err)=>{
                setTimeout(()=>{
                    Snackbar.error(err.data.message)
                })
            })
    .catch((err) => {
      setTimeout(() => {
        Snackbar.error(err.data.message);
      });
    });
}



</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 60px;
  border-bottom: none;
}
.ret {
  float: left;
  margin-top: 30px;
}
.title1 {
  font-size: 20px;
  position: absolute;
  margin-top: 30px;
  margin-left: 150px;
}
.bg {
  width: 100%;
  height: 150px;
  background-color: rgb(231, 237, 254);
}
.title2 {
  font-size: 20px;
  font-weight: bolder;
  position: absolute;
  margin: 20px auto auto 20px;
}
.jingxuan {
  position: absolute;
  width: 350px;
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin-left: 20px;
  margin-top: 70px;
}
.title3 {
  float: left;
  margin: 15px auto auto 10px;
  color: black;
}
.time {
  position: absolute;
  color: rgb(123, 121, 121);
  margin: 60px auto auto 10px;
  font-size: 10px;
}
.tubiao {
  float: right;
  margin: 20px 10px auto auto;
}
.shade {
  width: 100%;
  height: 30px;
  background-color: rgb(204, 206, 216);
  margin-top: 35px;
}
.shade2 {
  width: 100%;
  height: 30px;
  background-color: rgb(204, 206, 216);
}
.blue {
  width: 4px;
  height: 18px;
  background-color: blue;
  border-radius: 10px;
  position: absolute;
  margin: 6px auto auto 25px;
}
.title4 {
  position: absolute;
  font-weight: bold;
  margin: 4px auto auto 37px;
}
.upload {
  background-color: rgb(244, 245, 249);
  border: 1px blue dashed;
  width: 350px;
  height: 100px;
  color: blue;
  margin-top: 10px;
  margin-left: 20px;
  font-weight: bold;
  border-radius: 10px;
}
.bt {
  width: 80%;
  --button-border-radius: 10px;
  margin-left: 40px;
  margin-top: 10px;
  --button-large-height: 36px;
  float: left;
  --button-border-radius: 20px;
}
.upload-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: 1px blue dashed;
  border-radius: 10px;
  width: 350px;
  height: 100px;
  margin-top: 10px;
  margin-left: 20px;
}
.upload-wrap .file-ele {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  width: 350px;
  height: 100px;
}
.upload-wrap .file-open {
  width: 350px;
  height: 100px;
  line-height: 90px;
  text-align: center;
  color: #fff;
  background-color: rgb(244, 245, 249);
  color: blue;
  font-weight: bold;
}
</style>
